<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel-item img {
            width: 100%;
            height: 100%;
        }

        .el-footer .el-link {
            color: #666;
            margin: 0 5px;
        }

        /* 版权信息行样式 */
       .copyright-row {
            background-color: lightblue;
            color: white;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }

        /* 版权信息段落样式 */
       .copyright-row p {
            margin: 0;
            text-align: center;
            color: black; /* 添加这一行，将文字颜色改为黑色 */
        }

        /* 调整轮播组件的高度，可按需调整 */
       .el-carousel {
            height: 600px;
        }

        .header-avatar {
            vertical-align: middle;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; align-items: center;">
                        <img src="./static/images/logo.png" style="height: 60px" />
                        <h2 style="padding-left: 4px">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none;">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">资讯</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-input placeholder="请输入关键字"></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px;" class="hidden-xs-only">
                        <el-avatar src="./static/images/default-avatar.png" class="header-avatar"></el-avatar>
                        <el-link type="primary">{{ user.username }}</el-link>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="activeIndex">
                        <el-menu-item index="1">个人主页</el-menu-item>
                        <el-menu-item index="2">个人资料</el-menu-item>
                        <el-menu-item index="3">账号设置</el-menu-item>
                        <el-menu-item index="4">消息设置</el-menu-item>
                        <el-menu-item index="5">标签管理</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="4">
                                <img src="./static/images/default-avatar.png" style="width: 100px; height: 100px; border-radius: 50%;">
                            </el-col>
                            <el-col :span="20">
                                <h2>{{ user.username }}</h2>
                                <span>性别：{{ user.gender }}</span><br>
                                <span>签名墙：{{ user.sign }}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的文章">
                                <div v-if="articleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的课程">
                                <div v-if="courseList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我收藏的商品">
                                <div v-if="productList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./static/images/logo.png" style="height: 100px" />
                        </div>
                        <div>
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">资讯</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div>
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：123456789</p>
                            <p>邮箱: software@develop.com</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="copyright-row">
                    <p>软件开发工作室版权所有</p>
                </el-row>
            </el-footer>
        </el-container>
    </div>
    <script>
        var App = {
            data() {
                return {
                    user: {
                        username: localStorage.getItem("username") || "未登录",
                        gender: "女",
                        job: "前端开发工程师",
                        sign: "天天开心"
                    },
                    activeIndex: "1",
                    myArticleList: [],
                    articleList: [],
                    courseList: [],
                    productList: []
                };
            },
            mounted() {
                // 检查登录状态，如果未登录，跳转到首页
                if (!localStorage.getItem("isLogin")) {
                    window.location.href = "/index.html";
                }
            }
        };
        Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
</body>
</html>